<template>
  <el-form ref="ruleFormRef" label-position="top" :model="formInline" :rules="formRules" label-width="auto"
    v-loading="isLoading">
    <el-row :gutter="30">
      <re-col :value='12' :xs='24' :sm='24'>
        <el-form-item :label='titles?.factoryId' prop='factoryId'>
          <factoryIdSelect v-model='formInline.factoryId' clearable :placeholder='prompt?.factoryId'
            :style='{ width: "100%" }' @blur="formValidateField(ruleFormRef, 'factoryId')" />
        </el-form-item>
      </re-col>
      <re-col :value='12' :xs='24' :sm='24'>
        <el-form-item :label='titles?.productName' prop='productName'>
          <el-input v-model.trim='formInline.productName' clearable :placeholder='prompt?.productName' :maxlength="30"
            show-word-limit />
        </el-form-item>
      </re-col>
      <re-col :value='24' :xs='24' :sm='24'>
        <el-form-item :label='titles?.status' prop='status'>
          <el-radio-group v-model='formInline.status'>
            <el-radio v-for="item in ENABLE_STATUS" :key="item.value" :value="item.value">
              {{ isNullOrEmpty(item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>
      <re-col :value='24' :xs='24' :sm='24'>
        <el-form-item :label='titles?.accessType' prop='accessType'>
          <el-radio-group v-model='formInline.accessType'>
            <el-radio v-for="item in ACCESS_TYPE" :key="item.value" :value="item.value">
              {{ isNullOrEmpty(item.label) }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </re-col>
      <re-col :value='24' :xs='24' :sm='24'>
        <el-form-item :label='titles?.remark' prop='remark'>
          <el-input :maxlength="100" :show-word-limit="true" v-model='formInline.remark' :autosize="{ minRows: 4 }"
            type="textarea" clearable :placeholder='prompt?.remark' />
        </el-form-item>
      </re-col>
      <re-col :value='12' :xs='24' :sm='24'>
        <el-form-item :label='titles?.productIcon' prop='productIcon'>
          <ReUpload v-model:files='formInline.productIcon' :limit="1"></ReUpload>
        </el-form-item>
      </re-col>
      <re-col :value='12' :xs='24' :sm='24'>
        <el-form-item :label='titles?.deviceIconPath' prop='deviceIconPath'>
          <ReUpload v-model:files='formInline.deviceIconPath' :limit="1" :accept="'.png,.svg'" :file-size="100 / 1024">
          </ReUpload>
        </el-form-item>
      </re-col>
      <re-col :value='24' :xs='24' :sm='24'>
        <el-form-item :label='titles?.scriptPath' prop='scriptPath'>
          <UploadFile v-model:files='formInline.scriptPath' :limit="1" accept=".js" :preview="preview"></UploadFile>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import factoryIdSelect from '@/components/select/factoryIdSelect/factoryIdSelect.vue'
import ReUpload from '@/components/ReUpload/index.vue'
import UploadFile from '@/components/ReUpload/UploadFile.vue'
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import type { infoType } from '@/api/manage/product-management/product-type/index';
import { ENABLE_STATUS, ACCESS_TYPE } from '@/constant/product-management'
import { formValidateField } from '@/utils/functions'
type FormProps = {
  formInline: infoType,
  isLoading: boolean
}

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({} as infoType),
  isLoading: false
});

const formRules = reactive(<FormRules>{
  factoryId: [{ required: true, message: prompt?.factoryId, trigger: 'blur' },],
  productName: [{ required: true, message: prompt?.productName, trigger: 'blur' },],
  status: [{ required: true, message: prompt?.status, trigger: 'blur' },],
  accessType: [{ required: true, message: prompt?.accessType, trigger: 'blur' },],
  // remark: [{ required: true, message: prompt?.remark, trigger: 'blur' },],
  productIcon: [{ required: true, message: prompt?.productIcon, trigger: 'blur' },],
  deviceIconPath: [{ required: false, message: prompt?.deviceIconPath, trigger: 'blur' },],
  scriptPath: [{ required: true, message: prompt?.scriptPath, trigger: 'blur' },],
});
const ruleFormRef = ref();

const preview = (file: any) => {
  window.open(file.url)
  // const link = document.createElement('a')
  // link.style.display = 'none'
  // link.href = 'https://' + window.location.host + file.url
  // link.setAttribute('download', `${props.formInline?.productName}.js`)
  // document.body.appendChild(link)
  // link.click()
  // link.remove()
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
